<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <div
      v-if="page.data && page.data.length > 0"
      class="vc-block-list"
      :style="visual.parseStyle(currNode.currCompStyle)"
      v-loading="loading"
      element-loading-text="数据加载中..."
    >
      <div
        v-for="(data, index) in page.data"
        :key="index"
        class="vc-block-list-item"
        @click="clickItem(data)"
      >
        <div
          class="vc-block-list-item-title"
          :style="getTitleStyle()"
          @click="clickTitle(data)"
        >{{data["标题"]}}</div>
        <div
          class="vc-block-list-item-content"
          :style="getContentStyle()"
        >{{data["内容"]}}</div>
        <div
          v-if="currNode.currStyle && currNode.currStyle.subtitleList && currNode.currStyle.subtitleList.length > 0"
          class="vc-block-list-item-subtitle"
          :style="getSubtitleStyle()"
        >
          <div
            class="vc-block-list-item-subtitle-item"
            v-for="(subtitle, index2) in currNode.currStyle.subtitleList"
            :key="index2"
          >
            <div class="vc-block-list-item-subtitle-item-field">{{subtitle.name}}：</div>
            <div class="vc-block-list-item-subtitle-item-value">{{data[subtitle.value] || ''}}</div>
          </div>
        </div>
      </div>
      <div class="vc-pagination" v-if="page.data && page.data.length > 0 && dataPage">
        <el-pagination
          layout="total, prev, pager, next, jumper, sizes"
          :current-page="queryInfo.pageNumber"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="queryInfo.pageSize"
          :total="page.totalRecord"
          @current-change="refreshPage"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <div
      v-else
      class="vc-block-list"
      :style="visual.parseStyle(currNode.currCompStyle)"
    >
      <div class="vc-block-list-empty">
        <img src="@/assets/images/no-data.png" style="width: 100px" alt />
        <span style="margin-top: 20px;">暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, getCurrentInstance, nextTick } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";

const props = defineProps({
  node: Object
});

const initializing = ref(true);
const loading = ref(false);
const currNode = ref(props.node);
const compStyle = ref({});
const queryInfo = ref({
  pageNumber: 1,
  pageSize: 10
});
const page = ref({});
const dataPage = ref(false);
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  compStyle.value = currNode.value.currCompStyle || {};
  const compData = currNode.value.compData || {};
  dataPage.value = compData.dataPage || false;
  if (dataPage.value) {
    queryInfo.value.pageSize = compData.dataPageSize || 20;
  } else {
    queryInfo.value.pageSize = compData.dataQueryTotal || 20;
  }
  await nextTick(() => initializing.value = false);
  await findPage();
};

const getTitleStyle = () => {
  return visual.parseFontStyle(compStyle.value, '', 'title.');
};

const getContentStyle = () => {
  let result = visual.parseFontStyle(compStyle.value, '', 'content.');
  if (compStyle.value['value.show'] === false) {
    result += "display: none!important;";
  }
  return result;
};

const getSubtitleStyle = () => {
  return visual.parseFontStyle(compStyle.value, '', 'subtitle.');
};

const clickItem = (row) => {
  eventHandler.trigger("点击事件", {"col": "数据块", "row": row});
};

const clickTitle = (row) => {
  eventHandler.trigger("点击标题事件", {"col": "标题", "row": row});
};

const handleSizeChange = (pageSize) => {
  queryInfo.value.pageSize = pageSize
  refreshPage(1)
};

const refreshPage = (pageNumber) => {
  queryInfo.value.pageNumber = pageNumber;
  findPage();
};

const findPage = async() => {
  loading.value = true;
  const compData = currNode.value.compData || {};
  page.value = await visual.loadData(compData, eventHandler, getData()) || {};
  await nextTick(() => loading.value = false);
}

const getData = () => {
  return {
    ...queryInfo,
    inputParam: currNode.value.inputParam || {}
  };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = () => {
  init();
};

onMounted(() => {
  refresh();
});

defineExpose({ init, getData, changeStyle, refresh });
</script>

<style scoped lang="scss">
.vc-block-list {
  width: 100%;
  .vc-block-list-empty {
    width: 100%;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.vc-block-list-item {
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.vc-block-list .vc-block-list-item:last-child {
  border-bottom: none!important;
}
.vc-block-list-item-title {
  padding: 15px 0;
}
.vc-block-list-item-content {
  padding: 8px 0;
}
.vc-block-list-item-subtitle {
  padding: 8px 0;
}
.vc-block-list-item-subtitle-item,
.vc-block-list-item-subtitle-item-field,
.vc-block-list-item-subtitle-item-value {
  font-size: inherit;
}
.vc-block-list-item-subtitle {
  display: flex;
  flex-direction: row;
  width: 100%;
  .vc-block-list-item-subtitle-item {
    display: flex;
    flex-direction: row;
    margin-right: 8px;
    width: 100%;
    .vc-block-list-item-subtitle-item-field {
      flex-shrink: 1;
    }
    .vc-block-list-item-subtitle-item-value {
      width: 1px;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.vc-pagination {
  margin: 20px 0;
  width: 100%;
  text-align: right;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>